<template>
	<div id="Extranet" style="width: 100%;">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<h1><i class="el-icon-lx-cascades"></i> 外网ip查询/内网Ip查询</h1>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div style="border:0.01rem solid #A4DA89;padding: 6.25rem;">
			<el-row>
				<el-col :span="6">
					<section class="p-10">
						内网ip:
					</section>
				</el-col>
				<el-col :span="6">
					<section class="p-10">
						{{ ip }}
					</section>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<section class="p-10">
						外网ip:
					</section>
				</el-col>
				<el-col :span="6">
					<section class="p-10">
						{{cip }}
					</section>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<section class="p-10">
						所在城市:
					</section>
				</el-col>
				<el-col :span="6">
					<section class="p-10">
						{{city }}
					</section>
				</el-col>
			</el-row>
		</div>
		<el-row style="margin-top: 1.25rem;">
			<el-col :span="24">
				<section class="p-10">
					<el-tag>标签:</el-tag>
					<el-tag>外网ip</el-tag>
					<el-tag>ipConfig</el-tag>
					<el-tag>内网iP</el-tag>
					<el-tag>iP</el-tag>
					<el-tag>iP查询</el-tag>
					<el-tag>iP所在城市</el-tag>
				</section>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				ip: '',
				cip: '',
				city: '',
			}
		},
		created() {
			this.getCip()
		},
		mounted() {
			this.getUserIP((ip) => {
				this.ip = ip;
			});
		},
		methods: {
			getCip() {
				this.cip = localStorage.getItem('Ip')
				this.city = localStorage.getItem('cityname')
				// this.cip = returnCitySN["cip"]
			},
			getUserIP(onNewIP) {
				let MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
				let pc = new MyPeerConnection({
					iceServers: []
				});
				let noop = () => {};
				let localIPs = {};
				let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g;
				let iterateIP = (ip) => {
					if (!localIPs[ip]) onNewIP(ip);
					localIPs[ip] = true;
				};
				pc.createDataChannel('');
				pc.createOffer().then((sdp) => {
					sdp.sdp.split('\n').forEach(function(line) {
						if (line.indexOf('candidate') < 0) return;
						line.match(ipRegex).forEach(iterateIP);
					});
					pc.setLocalDescription(sdp, noop, noop);
				}).catch((reason) => {});
				pc.onicecandidate = (ice) => {
					if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
					ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
				};
			}
		},
		watch: {},
		computed: {}
	}
</script>
<style>
	#qrcode {
		display: inline-block;

	}

	#Base64Encoding {
		width: 100%;
	}

	.qrcol {
		border-radius: 4px;
		min-height: 200px;
		/* background-color: #B3E19D; */
		text-align: center;
	}

	.BarcodeStyle {
		border-radius: 4px;
		min-height: 200px;
		/* background-color: #B3E19D; */
	}
</style>
